<template>
	<a-form-item
	:class="[hasError ? 'hhg-form-item-has-error' : '']"
	:label="labelName"
	:name="name"
	:rules="rules">
		<div class="hhg-triggerWaferID">
			{{ hhgSelectList && hhgSelectList.length ? hhgSelectList.map(i=> i.name).join(',') : '' }}
			<div class="hhg-zoomIcon" @click="popFn" v-if="!isRead"></div>
		</div>
	</a-form-item>
	<a-modal centered v-bind="attrs" v-model:visible="visible" bodyStyle="padding:0" :footer="null" ref="modalRef" :wrap-style="{ overflow: 'hidden' }">
		<div class="modal">
			<div class="hhg-selectWarferIdWrap">
				<div class="hhg-selectWarferId">
					<div class="hhg-selectWarferIdLeft">Warfer ID:</div>
					<div class="hhg-draggableSelection">
						<div
							v-for="(item, index) in waferIDList"
							:key="item.id"
							class="hhg-numberItem"
							:class="[ item.selected ? 'selected' : '' ]"
							@click="selectListItemfn(item, $event, waferIDList)"
							@mousedown="startSelectionfn($event, index, waferIDList)"
							@mouseover="continueSelectionfn($event, index, waferIDList)"
							@mouseup="endSelectionfn($event)">
							{{ item.name }}
						</div>
					</div>
				</div>
				<div class="hhg-selectWarferIdButton">
					<a-button @click="selectAll" type="primary" class="hhg-waferIDButton">全选</a-button>
					<a-button @click="invertSelection" type="primary" class="hhg-waferIDButton">反选</a-button>
				</div>
			</div>
			<div class="mfoot">
				<a-button :style="{ background: '#3f7fbf', border: '0', color: '#fff' }" type="primary"
					@click="selectedWaferID">确定</a-button>
				<a-button :style="{ background: '#dddddd', border: '0', color: '#666' }" @click="visible = false">取消</a-button>
			</div>
		</div>
		<!-- 拖动 -->
		<template #title>
			<div ref="modalTitleRef" style="width: 100%; cursor: move">select WaferID</div>
		</template>
		<template #modalRender="{ originVNode }">
			<div :style="transformStyle">
				<component :is="originVNode" />
			</div>
		</template>
	</a-modal>
</template>
<script setup>
import { ref, watch, watchEffect, computed, defineExpose, useAttrs, defineEmits, onMounted } from 'vue'
import { selectListItem, startSelection, endSelection, continueSelection } from './utils'
//拖动
import { useDraggable } from '@vueuse/core'

const props = defineProps({
	config: {
            type: Object,
            default: ()=> {}
      }
})
const attrs = useAttrs()
const emits = defineEmits(['selectedWaferID', 'update:modelValue'])
// WaferID-start
const visible = ref(false)
const hhgSelectList = ref([])
const waferIDList = ref([])

const labelName = ref(props.config.labelName)
const name = ref(props.config.name)
const rules = ref(props.config.rules)
const isRead = ref(null)
const hasError = ref(props.config.hasError ? props.config.hasError : false)
watch(() => props.config.isRead, (val) => {
  if (val) {
	isRead.value = val
  }
}, { immediate: true }, { deep: true })

watch(() => props.config.list, (val) => {
  if (val) {
	waferIDList.value = val
  }
}, { immediate: true }, { deep: true })
const popFn = ()=> {
	visible.value = !visible.value
}
const selectListItemfn = (item, event, list)=> {
	return selectListItem(item, event, list)
}
const startSelectionfn = (event, index, list)=> {
	return startSelection(event, index, list)
}
const endSelectionfn = (event)=> {
	return endSelection(event)
}
const continueSelectionfn = (event, index, list)=> {
	return continueSelection(event, index, list)
}
const selectAll = ()=> {
	waferIDList.value.forEach((item) => (item.selected = true))
}
const invertSelection = ()=> {
      waferIDList.value.forEach((item) => (item.selected = !item.selected))
}
const selectedWaferID = ()=> {
	hhgSelectList.value = waferIDList.value.filter(i=> i.selected)
	if (hhgSelectList.value.length === 0) return
	emits('selectedWaferID', hhgSelectList.value)
	emits('update:modelValue', hhgSelectList.value.map(i=> i?.name).join(','))
	setTimeout(() => {
		visible.value = false
	}, 10)
}
// WaferID-end

//拖动
const modalTitleRef = ref(null)
const { x, y, isDragging } = useDraggable(modalTitleRef)
const startX = ref(0)
const startY = ref(0)
const startedDrag = ref(false)
const transformX = ref(0)
const transformY = ref(0)
const preTransformX = ref(0)
const preTransformY = ref(0)
const dragRect = ref({
	left: 0,
	right: 0,
	top: 0,
	bottom: 0
})
watch([x, y], () => {
	if (!startedDrag.value) {
		startX.value = x.value
		startY.value = y.value
		const bodyRect = document.body.getBoundingClientRect()
		const titleRect = modalTitleRef.value.getBoundingClientRect()
		dragRect.value.right = bodyRect.width - titleRect.width
		dragRect.value.bottom = bodyRect.height - titleRect.height
		preTransformX.value = transformX.value
		preTransformY.value = transformY.value
	}
	startedDrag.value = true
})
watch(isDragging, () => {
	if (!isDragging) {
		startedDrag.value = false
	}
})
watchEffect(() => {
	if (startedDrag.value) {
		transformX.value =
			preTransformX.value +
			Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
			startX.value;
		transformY.value =
			preTransformY.value +
			Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
			startY.value
	}
})
const transformStyle = computed(() => {
	return {
		transform: `translate(${transformX.value}px, ${transformY.value}px)`
	}
})
defineExpose({ visible })
onMounted(()=> {
	hhgSelectList.value = props.config.displayList ? props.config.displayList : []
	// 将 list 转换为 Set 以提高查找效率
	const listIds = new Set(props.config.displayList.map(item => item.id))
	// 使用 Set.has 方法来更新 waferIDList 数组
	waferIDList.value = waferIDList.value.map(item => ({
		...item,
		selected: listIds.has(item.id)
	}))
})
</script>
<style scoped lang="scss"></style>